@import "../../assets/less/variable.less";

.segmentControl {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.indicator {
  border: 1px solid @primary-color;
  border-radius: 4px;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;

  &.left {
    left: 0;
  }

  &.right {
    right: 0;
  }

  & > li {
    padding: 0 12px;
    border-right: 1px solid @primary-color;
    color: fade(@text-color, 35);
    cursor: pointer;

    &:last-child {
      border-right: 0;
    }

    i {
      display: inline-block;
      transition: transform 300ms ease;
    }

    &:hover {
      color: @primary-color;

      i {
        transform: scale(1.1, 1.1);
      }
    }

    &.active {
      background-color: @primary-color;
      color: @white;
      cursor: default;

      i {
        transform: none;
      }
    }
  }
}

.segmentPanes {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
}

.segmentPane {
  flex: 1;
  display: flex;
  flex-direction: column;
}
